<template>
    <div class="countdown">
        <span class="time-block">{{ hours }}</span>:
        <span class="time-block">{{ minutes }}</span>:
        <span class="time-block">{{ seconds }}</span>
    </div>
</template>

<script setup>
    import { ref, onMounted, onUnmounted } from 'vue';

    const props = defineProps({
        endTime: {
            type: Number,
            required: true
        }
    });

    const hours = ref('00');
    const minutes = ref('00');
    const seconds = ref('00');

    let timer = null;

    const updateCountdown = () => {
        const now = new Date().getTime();
        const distance = props.endTime - now;

        if (distance <= 0) {
            hours.value = '00';
            minutes.value = '00';
            seconds.value = '00';
            clearInterval(timer);
            return;
        }

        const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const s = Math.floor((distance % (1000 * 60)) / 1000);

        hours.value = h.toString().padStart(2, '0');
        minutes.value = m.toString().padStart(2, '0');
        seconds.value = s.toString().padStart(2, '0');
    };

    onMounted(() => {
        updateCountdown();
        timer = setInterval(updateCountdown, 1000);
    });

    onUnmounted(() => {
        clearInterval(timer);
    });
</script>

<style scoped>
    .countdown {
        display: flex;
        align-items: center;
    }

    .time-block {
        display: inline-block;
        min-width: 30px;
        padding: 5px;
        background: #fff;
        color: #ff4e4e;
        font-weight: bold;
        text-align: center;
        border-radius: 4px;
        margin: 0 2px;
    }
</style>